<template>
  <div class="store-terminal">
    <!-- 预约看板 -->
    <el-card class="appointment-board">
      <div slot="header">
        <span>今日预约看板</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="refreshAppointments">
          刷新数据
        </el-button>
      </div>
      
      <el-timeline>
        <el-timeline-item
          v-for="appointment in todayAppointments"
          :key="appointment.id"
          :timestamp="appointment.time"
          :type="getTimelineType(appointment.status)"
        >
          <el-card class="appointment-card">
            <div class="appointment-info">
              <div class="customer-info">
                <h4>{{ appointment.customerName }}</h4>
                <p>{{ appointment.service }}</p>
                <p>技师: {{ appointment.technician }}</p>
              </div>
              <div class="status-info">
                <el-tag :type="getStatusTagType(appointment.status)">
                  {{ appointment.status }}
                </el-tag>
                <div class="actions">
                  <el-button 
                    v-if="appointment.status === '待签到'" 
                    size="mini" 
                    type="success" 
                    @click="checkIn(appointment)"
                  >
                    签到
                  </el-button>
                  <el-button 
                    v-if="appointment.status === '待签到'" 
                    size="mini" 
                    type="warning" 
                    @click="markLate(appointment)"
                  >
                    迟到
                  </el-button>
                  <el-button 
                    v-if="appointment.status === '待签到'" 
                    size="mini" 
                    type="danger" 
                    @click="markNoShow(appointment)"
                  >
                    爽约
                  </el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>

    <!-- 快速登记 -->
    <el-card class="quick-registration">
      <div slot="header">
        <span>快速登记</span>
      </div>
      
      <!-- 步骤指示器 -->
      <el-steps :active="currentStep" finish-status="success" style="margin-bottom: 20px;">
        <el-step title="选择服务" icon="el-icon-shopping-cart-2"></el-step>
        <el-step title="选择技师" icon="el-icon-user"></el-step>
        <el-step title="确认信息" icon="el-icon-check"></el-step>
      </el-steps>

      <!-- 步骤内容 -->
      <div class="step-content">
        <!-- 步骤1：选择服务 -->
        <div v-if="currentStep === 0" class="step-panel">
          <h3>选择服务项目</h3>
          <div class="service-grid">
            <div
              v-for="service in services"
              :key="service.id"
              class="service-card"
              :class="{ selected: selectedService?.id === service.id }"
              @click="selectService(service)"
            >
              <div class="service-icon">
                <i class="el-icon-shopping-cart-2"></i>
              </div>
              <div class="service-info">
                <h4>{{ service.name }}</h4>
                <p class="service-price">¥{{ service.price }}</p>
                <p class="service-duration">{{ service.duration }}分钟</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 步骤2：选择技师 -->
        <div v-if="currentStep === 1" class="step-panel">
          <h3>选择技师</h3>
          <div class="technician-grid">
            <div
              v-for="tech in availableTechnicians"
              :key="tech.id"
              class="technician-card"
              :class="{ selected: selectedTechnician?.id === tech.id }"
              @click="selectTechnician(tech)"
            >
              <div class="technician-avatar">
                <span>{{ tech.avatar }}</span>
              </div>
              <div class="technician-info">
                <h4>{{ tech.name }}</h4>
                <div class="rating">
                  <span>{{ tech.rating }}</span>
                  <i class="el-icon-star-on"></i>
                </div>
                <p class="technician-status" :class="tech.status === '空闲中' ? 'available' : 'busy'">
                  {{ tech.status }}
                </p>
              </div>
            </div>
          </div>
        </div>

        <!-- 步骤3：确认信息 -->
        <div v-if="currentStep === 2" class="step-panel">
          <h3>确认预约信息</h3>
          <el-form :model="customerInfo" label-width="100px">
            <el-form-item label="客户姓名">
              <el-input v-model="customerInfo.name" placeholder="请输入客户姓名"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="customerInfo.phone" placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item label="服务项目">
              <span>{{ selectedService?.name }}</span>
            </el-form-item>
            <el-form-item label="服务技师">
              <span>{{ selectedTechnician?.name }}</span>
            </el-form-item>
            <el-form-item label="服务价格">
              <span class="price">¥{{ selectedService?.price }}</span>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 导航按钮 -->
      <div class="navigation-buttons">
        <el-button v-if="currentStep > 0" @click="prevStep">上一步</el-button>
        <el-button 
          v-if="currentStep < 2" 
          type="primary" 
          @click="nextStep"
          :disabled="!canNextStep"
        >
          下一步
        </el-button>
        <el-button 
          v-if="currentStep === 2" 
          type="success" 
          @click="confirmRegister"
          :loading="submitting"
        >
          确认预约
        </el-button>
      </div>
    </el-card>

    <!-- 打印集成 -->
    <el-card class="print-integration">
      <div slot="header">
        <span>打印集成</span>
      </div>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="print-section">
            <h4>预约凭证打印</h4>
            <div class="print-preview">
              <div class="receipt">
                <div class="receipt-header">
                  <h3>预约凭证</h3>
                  <p>预约号: AP{{ Date.now() }}</p>
                </div>
                <div class="receipt-content">
                  <p><strong>客户姓名:</strong> {{ customerInfo.name || '待填写' }}</p>
                  <p><strong>服务项目:</strong> {{ selectedService?.name || '待选择' }}</p>
                  <p><strong>服务技师:</strong> {{ selectedTechnician?.name || '待选择' }}</p>
                  <p><strong>预约时间:</strong> {{ new Date().toLocaleString() }}</p>
                  <p><strong>服务价格:</strong> ¥{{ selectedService?.price || 0 }}</p>
                </div>
                <div class="receipt-footer">
                  <div class="qr-code">二维码</div>
                  <p>扫码导航到店</p>
                </div>
              </div>
            </div>
            <el-button type="primary" @click="printReceipt" :disabled="!canPrint">
              打印凭证
            </el-button>
          </div>
        </el-col>
        
        <el-col :span="12">
          <div class="print-section">
            <h4>服务清单打印</h4>
            <div class="print-preview">
              <div class="service-list">
                <div class="list-header">
                  <h3>服务项目清单</h3>
                  <p>时间: {{ new Date().toLocaleString() }}</p>
                </div>
                <div class="list-content">
                  <div v-for="service in services" :key="service.id" class="service-item">
                    <span>{{ service.name }}</span>
                    <span>¥{{ service.price }}</span>
                  </div>
                </div>
                <div class="list-footer">
                  <p>总计: {{ services.length }} 项服务</p>
                </div>
              </div>
            </div>
            <el-button type="primary" @click="printServiceList">
              打印清单
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import request from '../../utils/request'

// 响应式数据
const currentStep = ref(0)
const selectedService = ref(null)
const selectedTechnician = ref(null)
const customerInfo = ref({ name: '', phone: '' })
const submitting = ref(false)

// 今日预约数据
const todayAppointments = ref([
  {
    id: 1,
    customerName: '张三',
    service: '面部护理',
    technician: '技师1号',
    time: '09:00',
    status: '已签到'
  },
  {
    id: 2,
    customerName: '李四',
    service: '身体按摩',
    technician: '技师2号',
    time: '10:30',
    status: '待签到'
  },
  {
    id: 3,
    customerName: '王五',
    service: '足疗',
    technician: '技师3号',
    time: '14:00',
    status: '迟到'
  }
])

// 服务项目数据
const services = ref([
  { id: 1, name: '面部护理', price: 198, duration: 90 },
  { id: 2, name: '身体按摩', price: 298, duration: 100 },
  { id: 3, name: '足疗', price: 158, duration: 80 },
  { id: 4, name: 'SPA护理', price: 398, duration: 120 },
  { id: 5, name: '美甲', price: 128, duration: 60 },
  { id: 6, name: '美发', price: 258, duration: 120 }
])

// 可用技师数据
const availableTechnicians = ref([])

// 计算属性
const canNextStep = computed(() => {
  if (currentStep.value === 0) return selectedService.value !== null
  if (currentStep.value === 1) return selectedTechnician.value !== null
  return true
})

const canPrint = computed(() => {
  return customerInfo.value.name && selectedService.value && selectedTechnician.value
})

// 方法
const selectService = (service) => {
  selectedService.value = service
}

const selectTechnician = (tech) => {
  if (tech.status === '空闲中') {
    selectedTechnician.value = tech
  } else {
    ElMessage.warning('该技师正在服务中，请选择其他技师')
  }
}

const nextStep = () => {
  if (canNextStep.value) {
    currentStep.value++
  }
}

const prevStep = () => {
  currentStep.value--
}

const confirmRegister = async () => {
  if (!customerInfo.value.name || !customerInfo.value.phone) {
    ElMessage.warning('请填写客户信息')
    return
  }
  
  submitting.value = true
  
  try {
    // 这里调用API保存预约信息
    await new Promise(resolve => setTimeout(resolve, 1000)) // 模拟API调用
    
    ElMessage.success('预约成功！')
    
    // 重置表单
    currentStep.value = 0
    selectedService.value = null
    selectedTechnician.value = null
    customerInfo.value = { name: '', phone: '' }
  } catch (error) {
    ElMessage.error('预约失败，请重试')
  } finally {
    submitting.value = false
  }
}

const checkIn = (appointment) => {
  appointment.status = '已签到'
  ElMessage.success('签到成功')
}

const markLate = (appointment) => {
  appointment.status = '迟到'
  ElMessage.warning('已标记为迟到')
}

const markNoShow = (appointment) => {
  appointment.status = '爽约'
  ElMessage.error('已标记为爽约')
}

const refreshAppointments = () => {
  ElMessage.success('预约数据已刷新')
}

const getTimelineType = (status) => {
  switch (status) {
    case '已签到': return 'success'
    case '迟到': return 'warning'
    case '爽约': return 'danger'
    default: return 'primary'
  }
}

const getStatusTagType = (status) => {
  switch (status) {
    case '已签到': return 'success'
    case '迟到': return 'warning'
    case '爽约': return 'danger'
    default: return 'info'
  }
}

const printReceipt = () => {
  ElMessage.success('预约凭证打印成功')
  // 这里实现实际的打印功能
}

const printServiceList = () => {
  ElMessage.success('服务清单打印成功')
  // 这里实现实际的打印功能
}

// 获取技师数据
const fetchTechnicians = async () => {
  try {
    const response = await request.get('/api/quick-registration/technicians')
    if (response.data.code === 200) {
      availableTechnicians.value = response.data.data.map(tech => ({
        id: tech._id,
        name: tech.name,
        avatar: tech.avatar,
        rating: tech.rating,
        status: tech.status
      }))
    }
  } catch (error) {
    console.error('获取技师数据失败:', error)
    // 使用默认数据
    availableTechnicians.value = [
      { id: 1, name: '技师1号', avatar: '技', rating: 4.8, status: '空闲中' },
      { id: 2, name: '技师2号', avatar: '技', rating: 4.9, status: '空闲中' },
      { id: 3, name: '技师3号', avatar: '技', rating: 4.7, status: '服务中' }
    ]
  }
}

// 生命周期
onMounted(() => {
  fetchTechnicians()
})
</script>

<style scoped>
.store-terminal {
  padding: 20px;
}

.appointment-board,
.quick-registration,
.print-integration {
  margin-bottom: 20px;
}

.appointment-card {
  margin-bottom: 10px;
}

.appointment-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.customer-info h4 {
  margin: 0 0 5px 0;
  color: #333;
}

.customer-info p {
  margin: 0 0 3px 0;
  color: #666;
  font-size: 14px;
}

.status-info {
  text-align: right;
}

.actions {
  margin-top: 10px;
}

.actions .el-button {
  margin-left: 5px;
}

/* 快速登记样式 */
.step-content {
  min-height: 300px;
}

.step-panel h3 {
  margin-bottom: 20px;
  color: #333;
}

.service-grid,
.technician-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.service-card,
.technician-card {
  border: 2px solid #ebeef5;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.service-card:hover,
.technician-card:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.service-card.selected,
.technician-card.selected {
  border-color: #409eff;
  background-color: #f0f9ff;
}

.service-icon {
  font-size: 24px;
  color: #409eff;
  margin-bottom: 10px;
}

.service-info h4 {
  margin: 0 0 5px 0;
  color: #333;
}

.service-price {
  color: #f56c6c;
  font-weight: bold;
  margin: 0 0 5px 0;
}

.service-duration {
  color: #666;
  font-size: 12px;
  margin: 0;
}

.technician-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #909399;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  margin: 0 auto 10px;
}

.technician-info h4 {
  margin: 0 0 5px 0;
  color: #333;
}

.rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-bottom: 5px;
}

.rating span {
  font-weight: bold;
  color: #f56c6c;
}

.el-icon-star-on {
  color: #f56c6c;
}

.technician-status {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  margin: 0;
}

.technician-status.available {
  background-color: #f0f9ff;
  color: #409eff;
}

.technician-status.busy {
  background-color: #fef0f0;
  color: #f56c6c;
}

.navigation-buttons {
  text-align: center;
  margin-top: 20px;
}

.navigation-buttons .el-button {
  margin: 0 10px;
}

/* 打印集成样式 */
.print-section {
  text-align: center;
}

.print-section h4 {
  margin-bottom: 15px;
  color: #333;
}

.print-preview {
  margin-bottom: 15px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.receipt,
.service-list {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
  text-align: left;
}

.receipt-header,
.list-header {
  text-align: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.receipt-header h3,
.list-header h3 {
  margin: 0 0 5px 0;
  color: #333;
}

.receipt-header p,
.list-header p {
  margin: 0;
  color: #666;
  font-size: 12px;
}

.receipt-content p,
.list-content .service-item {
  margin: 0 0 5px 0;
  display: flex;
  justify-content: space-between;
}

.price {
  color: #f56c6c;
  font-weight: bold;
}

.receipt-footer {
  text-align: center;
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.qr-code {
  width: 60px;
  height: 60px;
  background-color: #f0f0f0;
  margin: 0 auto 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #999;
}

.list-footer {
  text-align: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  font-weight: bold;
}

.el-card {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.el-card__header {
  background-color: #fafafa;
  border-bottom: 1px solid #ebeef5;
  font-weight: bold;
}
</style>